<!-- views/purchase/components/SupplierStats.vue -->
<template>
  <el-row :gutter="16" class="stats-row">
    <el-col :xs="24" :sm="6">
      <StatCard
        title="供应商总数"
        :value="stats.totalSuppliers"
        icon="OfficeBuilding"
        color="#1890ff"
        :trend="stats.supplierTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="合作中"
        :value="stats.activeSuppliers"
        icon="Connection"
        color="#52c41a"
        :trend="stats.activeTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <StatCard
        title="待审核"
        :value="stats.pendingSuppliers"
        icon="Clock"
        color="#fa8c16"
        :trend="stats.pendingTrend"
      />
    </el-col>
    <el-col :xs="24" :sm="6">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="高风险供应商定义：评分低于3.0的合作中供应商"
        placement="top"
      >
        <StatCard
          title="高风险"
          :value="stats.riskSuppliers"
          icon="Warning"
          color="#ff4d4f"
          :trend="stats.riskTrend"
        />
      </el-tooltip>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import StatCard from '@/components/StatCard.vue'

interface SupplierStats {
  totalSuppliers: number
  activeSuppliers: number
  pendingSuppliers: number
  riskSuppliers: number
  supplierTrend: number
  activeTrend: number
  pendingTrend: number
  riskTrend: number
}

const props = defineProps<{
  stats: SupplierStats
}>()
</script>

<style scoped>
.stats-row {
  margin-bottom: 20px;
}
</style>